<template>
  <div>首页</div>
  <ul>
    <li v-for="item in list" :key="item.id" @click="gotodetail(item.id)">
      {{ item.major }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const list = ref([
  {
    id: 1,
    major: "H5",
  },
  {
    id: 2,
    major: "JAVA",
  },
  {
    id: 3,
    major: "Test",
  },
]);

// 定义router 实例对象, useRouter函数只能在setup 作用域内直接使用,不能写在其他函数内.
// useRouter() === this.$router 二者等价
const router = useRouter();

const gotodetail = (id) => {
  //以前选项式写法:  this.$router.push(path)
  //   console.log("router", router);
  router.push({ path: "/detail", query: { id } });
};
</script>
<style scoped>
</style>